<template>
  <el-row>
    <el-col :span="8" style="padding-right: 10px">
      <div class="cardcard">
        <el-card shadow="hover" class="box-card">
            <div class="user">
              <img :src="avatar" class="user-avatar">
              <div class="userinfo">
                <p class="name">{{ name }}</p>
                <p class="postId">{{ roleName }}</p>
              </div>
            </div>

            <div class="login-info">
              <p>账号/学号:     <span>{{ user.username }}</span></p>
              <p>院系/班级: <span>{{ deptname }}</span></p>
            </div>

        </el-card>
      </div>
      <div class="cardcard">
        <el-card shadow="hover" class="table_card">
          <div class="list-info">
            <p>我的测试</p>
          </div>
          <el-table
            :data="list"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
              prop="name"
              label="试卷">
            </el-table-column>
            <el-table-column
              prop="point"
              label="得分">
            </el-table-column>
            <el-table-column
              prop="sumScore"
              label="总分">
            </el-table-column>
            <el-table-column label="详情"  align="center" fixed="right" width="60px">
              <template slot-scope="scope">
                <el-button type="primary" plain round :disabled="$hasBP('bnt.mywork.workdetail')  === false" icon="el-icon-document" size="mini" @click="GotoDetail(scope.row)" title="查看详情"/>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <el-card shadow="hover" style="height:130px">
        <div class="login-info">
          <p>今日总访问量:     <span>{{ DateLogin }}</span></p>
          <p>今日访问次数: <span>{{ MyDateLogin }}</span></p>
        </div>
      </el-card>
      
    </el-col>
    <el-col :span="16" style="padding-left;: 10px">
      <div class="jr">
        <el-card shadow="hover" class="right_card">
          <div class="house_card">
            <p>推荐课程</p>
          </div>
          <template>
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="o in courseList" :key="o.length">
                  <h3 class="medium">{{ o.courseName }}</h3>
                  <div >
                    <template>
                      <img :src="o.url" width="420px" height="200px" @click="StepPage(o)"/>
                    </template>
                  </div>

              </el-carousel-item>
            </el-carousel>
          </template>
        </el-card>
      </div>
      <el-card shadow="hover" style="height:280px">
        <!--折线图-->
        <div ref="echarts1" style="width: 800px;height:280px;">
          
        </div>
      </el-card>
      <div class="graph">
        <el-card shadow="hover" style="height:260px">
          <div class="house_card">
            <p>最高评星: {{ StarCourse.courseName }}</p>
            <el-rate
              v-model="StarCourse.avg"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <template>
            <div>
              <template>
                <el-image
                style="width: 380px; height: 200px"
                :src="StarCourse.url"
                fit="fill"
                @click="StepStarPage()"></el-image>
              </template>
            </div>
          </template>
        </el-card>

        <el-card shadow="hover" style="height:260px"> 
          <div class="house_card">
            <p>最多学习: {{ StudyCourse.courseName }}</p>
            <el-rate
              v-model="StudyCourse.avg"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <template>
            <div>
              <template>
                <el-image
                style="width: 380px; height: 200px"
                :src="StudyCourse.url"
                fit="fill"
                @click="StepStudyPage()"></el-image>
              </template>
            </div>
          </template>
        </el-card>
      </div>

    
    </el-col>
  </el-row>
  <!-- <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div> -->
</template>
<style>
.el-table .warning-row {
  background: rgba(255, 193, 193, 0.719);
}

.el-table .success-row {
  background: #bcfcff8d;
}
/* .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
} */
</style>
<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import api from '@/api/home'
import eupapi from '@/api/El/eluserPaper'
import capi from '@/api/LearnSpace/Course'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'avatar'
    ])
  },

  data() {
    return {
      user: {},
      list: null,
      DateLogin:'0',
      MyDateLogin:'0',
      deptname:'',
      roleName:'',
      courseList: null,
      StarCourse: null,
      StudyCourse: null,
      

    }
  },
  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    api.getinfo().then(resq=>{
      this.user = resq.data.sysUser
      this.deptname = resq.data.deptname
      this.roleName = resq.data.roleName  
      this.courseList = resq.data.course
      //基于准备好的dom，初始化echarts实例
      const echarts1 =echarts.init(this.$refs.echarts1)//得到echarts实例
      //指定图表的配置项和数据
      var option = {
        title: {
          text: '七日内网站访问折线图'
        },
        tooltip: {},
        legend: {
          data: ['访问量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '访问量',
            type: 'line',
            data: []
          }
        ]
      };
      option.xAxis.data = resq.data.sevenLoginDate
      option.series[0].data = resq.data.sevenLoginNum
      // 使用刚指定的配置项和数据显示图表。
      echarts1.setOption(option);
    
    })
    api.getDateLogin().then(resq=>{
      this.DateLogin = resq.data
    })
    api.getDateLoginByUser().then(resq=>{
      this.MyDateLogin = resq.data
    })
    eupapi.Mywork(1,5,null).then(resp => {
      this.list = resp.data.records
      this.list.forEach(element => {
        element.sumScore = element.radioCount * element.radioScore + element.multiCount * element.multiScore + element.judgeCount * element.judgeScore + element.saqCount * element.saqScore
      });
    })
    capi.GetStarCourse().then(resp => {
      this.StarCourse = resp.data
    })
    capi.GetMostStudy().then(resp => {
      this.StudyCourse = resp.data
    })
    
 


  },
  methods: {
    GotoDetail(row){
      this.$router.push('/work/workDetail?id='+row.id);
    },
    StepPage(o){
      this.$router.push('/LearnSpace/DetailVideo?id='+o.id+'&courseName='+o.courseName+'&teacherId='+o.teacherId);
    },
    StepStarPage(){
      this.$router.push('/LearnSpace/DetailVideo?id='+this.StarCourse.id+'&courseName='+this.StarCourse.courseName+'&teacherId='+this.StarCourse.teacherId);
    },
    StepStudyPage(){
      this.$router.push('/LearnSpace/DetailVideo?id='+this.StudyCourse.id+'&courseName='+this.StudyCourse.courseName+'&teacherId='+this.StudyCourse.teacherId);
    },
    tableRowClassName({row}) {
        let a = row.point/row.sumScore
        if (a < 0.6) {
          return 'warning-row';
        } else if (a > 0.8) {
          return 'success-row';
        }
        return '';
      },
     


  }
}
</script>

<style lang="scss" scoped>
  .right_card {
    width: auto;
    height: 289px;
  }
  .table_card{
    width: auto;
    height: 410px;

  }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.user{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;;
  display: flex;
  align-items: center;
  img {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{
      font-size: 32px;
      margin-bottom: 10px;
    }
    .postId{
      color: #999999;
    }
  
  }
}
.login-info{
  p{
      line-height: 28px;
      font-size: 14px;
      color: #999999;
      span{
        color: #666666;
        margin-left: 60px;
      }
    }
}
.list-info{
  p{
      line-height: 28px;
      font-size: 16px;
      color: #f8998f;
    }
}
.house_card{
  p{
      line-height: 28px;
      font-size: 16px;
      color: #8ab4f0;
    }
}

html,body,h3,p{
  margin: 0;
  padding: 0;
}
.cardcard{
  margin-bottom: 20px;
}
.jr{
  margin-bottom: 20px;
}

.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
    width: 48%;
  }

}

</style>
